import { delUser, getUserInfo } from '@/api/user';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Button, Table, message } from 'antd';
import React, { useEffect, useState } from 'react';


const Demo1: React.FC = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);

    const handleDelete = (id: string) => {
        setLoading(true)
        // 删除操作
        delUser(parseInt(id)).then((res: any) => {
            if (res.code === 200) {
                message.success("删除成功")
                setData(data.filter((item: any) => item.id !== id))
            }
        }).finally(() => {
            setLoading(false)
        })
    }

    useEffect(() => {
        setLoading(true)
        getUserInfo().then((res: any) => {
            setData(res.data)
        }).finally(() => {
            setLoading(false)
        })
    }, [])

    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: (text: string) => <a>{text}</a>,
            width: 330
        }, {
            title: '姓名',
            dataIndex: 'name',
            key: 'id',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'id',
            sorter: (a: any, b: any) => a.age - b.age,
            ellipsis: true,
        }, {
            title: '邮箱',
            dataIndex: 'email',
            key: 'id',
        }, {
            title: '电话',
            dataIndex: 'phone',
            key: 'id',
        }, {
            title: '操作',
            dataIndex: '',
            key: 'id',
            width: 120,
            render: (text: string, record: any) =>
                <>
                    <Button type='primary' shape='circle'>
                        <EditOutlined />
                    </Button>
                    <Button type='primary' danger shape='circle' style={{ marginLeft: "10px" }} onClick={() => handleDelete(record.id)}>
                        <DeleteOutlined />
                    </Button>
                </>,
        }
    ]

    return (
        <div>
            <Table loading={loading} bordered columns={columns} dataSource={data}></Table>
        </div>
    )
}

export default Demo1;